<template>
  <div style="background: #fff; padding: 20px; box-sizing: border-box">
    <a-row>
      <a-col :span="24">
        <a-select show-search
                  allowClear
                  option-filter-prop="children"
                  :filter-option="filterOption"
                  style="width: 200px;margin-right: 20px;"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  @change="handleChange" v-model="deviceId" placeholder="请填写巡检设备">
          <a-select-option v-for="(item,index) in list" :key="index" :value="item.id">{{ item.deviceName }}
          </a-select-option>
        </a-select>
        <a-select v-model="inspectionStatus" placeholder="请选择设备状态" style="width: 200px;margin-right: 20px;">
          <a-select-option value="1">异常</a-select-option>
          <a-select-option value="0">正常</a-select-option>
        </a-select>
        <a-date-picker @change="onChange" v-model="startTime" style="width: 200px;margin-right: 20px;"/>
        <a-button type="primary" @click="search" style="background: #3C67F1;border: none;">查询</a-button>
      </a-col>
      <a-col :span="24" style="text-align: right;margin-bottom: 15px;">
        <a-button icon="export" style="margin-right: 10px;border: 1px solid #B3D8FF;background: #ECF5FF;color: #409EFF;"
                  type="primary" @click="exportXlsBtn('设备保修')" ghost>导出
        </a-button>
      </a-col>
      <a-col :span="24">
        <a-table :pagination="false" :loading="loading" rowKey="id" :columns="columns" :data-source="data" bordered>
          <span slot="index" slot-scope="text, record, index">{{ index + 1 }}</span>
          <span slot="handleResult" slot-scope="handleResult">{{ handleResult == '0' ? '未解决' : '已解决' }}</span>
          <div slot="operation" slot-scope="text">
            <a-button type="primary" @click="detailBtn(text)" style="background: #3C67F1;border: none;">填报</a-button>
          </div>
        </a-table>
        <a-pagination
          style="float: right;margin-top: 20px"
          v-model="pageNo"
          :total="total"
          :page-size="pageSize"
          @change="onShowSizeChange"
        >
        </a-pagination>
      </a-col>
      <a-col :span="24">
        <div
          style="width: 160px;height: 50px;display: flex; margin: 20px auto;align-items: center;justify-content: space-between;font-size: 20px;font-weight: bolder;">
          <img src="../../../assets/icon/bg.png"/>设备故障数量
        </div>
      </a-col>
      <a-col :span="24">
        <!--        <a-date-picker/>-->
      </a-col>
      <a-col :span="24">
        <div style="width: 100%;height: 30vh" id="analysis"></div>
      </a-col>
    </a-row>
    <HandlingWarranty ref="HandlingWarranty"></HandlingWarranty>
  </div>
</template>
<script>
// 引入混入封装方法
import getAll from './getAll'
import HandlingWarranty from './HandlingWarranty'
import {listRepair, list, aliyunDeviceInspection, queryDateCount, query} from '@/api/device'
import {exportXls} from "@api/meteorological";

const columns = [
  {
    title: '序号',
    scopedSlots: {customRender: 'index'},
    key: 'name',
    width: 80,
    align: 'center'
  },
  {
    title: '巡检单号',
    dataIndex: 'id',
    width: 200,
    ellipsis: true
  },
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    ellipsis: true
  },
  {
    title: '上报时间',
    dataIndex: 'startTime',
    ellipsis: true
  },
  {
    title: '异常原因',
    dataIndex: 'faultReason',
    ellipsis: true
  },
  {
    title: '处理方法',
    dataIndex: 'handleWay',
    ellipsis: true
  },
  // {
  //   title: '设备位置',
  //   ellipsis: true
  // },
  {
    title: '上报人员',
    dataIndex: 'updateBy',
    ellipsis: true
  },
  {
    title: '处理人',
    dataIndex: 'createBy',
    ellipsis: true
  },
  {
    title: '处理状态',
    dataIndex: 'handleResult',
    scopedSlots: {customRender: 'handleResult'},
    ellipsis: true
  },
  {
    title: '操作',
    dataIndex: 'id',
    key: 'operation',
    scopedSlots: {customRender: 'operation'}
  }
]

export default {
  mixins: [getAll],
  data() {
    return {
      data: [],
      columns,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      loading: true,
      startTime: '',
      inspectionStatus: undefined,
      exportUrl: '/fabr/fabrDeviceInspection/exportXls'
    }
  },
  created() {
  },
  components: {
    HandlingWarranty
  },
  mounted() {
    this.dataList(this.pageNo, this.pageSize)
  },
  methods: {
    exportXlsBtn(message) {
      exportXls(this.exportUrl).then(res => {
        const blob = new Blob([res], {type: 'application/vnd.ms-excel'})
        const urls = window.URL.createObjectURL(blob)
        const a = document.createElement('a') // 生成虚拟a标签
        a.href = urls
        a.download = message + '.xls'
        a.click()
        document.body.removeChild(a) // 下载完成移除元素
        window.URL.revokeObjectURL(urls) // 释放掉blob对象
      }).catch(err => {

      })
    },
    // 数据获取
    dataList(pageNo, pageSize) {
      // var now = new Date()
      // var weekFirstDay = new Date(now- (now.getDay() - 1) * 86400000)
      // var firstMonth = Number(weekFirstDay.getMonth()) + 1
      // var weekLastDay = new Date((weekFirstDay / 1000 + 6 * 86400) * 1000)
      // var lastMonth = Number(weekLastDay.getMonth()) + 1
      // var currentWeek = weekFirstDay.getFullYear() + '-' + firstMonth + '-' + weekFirstDay.getDate() + '~' + weekLastDay.getFullYear() + '-' + lastMonth + '-' + weekLastDay.getDate()
      // console.log(currentWeek)
      listRepair(pageNo, pageSize).then(res => {
        console.log(res)
        this.total = res.result.total
        this.data = res.result.records
        this.loading = false
      }).catch(err => {
      })
      query().then(res => {
        this.list = res.result
      }).catch(err => {
      })
      queryDateCount().then(res => {
        console.log('queryDateCount', res)

        let xData = res.result.map(item => {
          return item.deviceName
        })
        let yData = res.result.map(item => {
          return item.sysOrgCode
        })
        // // 折线图
        this.analysis(xData, yData)
      }).catch(err => {
      })
    },
    // 获取时间
    onChange(date, dateString) {
      this.startTime = dateString
    },
    // 分页
    onShowSizeChange(pageNo, pageSize) {
      this.loading = true
      this.pageNo = pageNo
      this.pageSize = pageSize
      this.dataList(this.pageNo, this.pageSize)
    },
    // 搜索
    search() {
      this.loading = true
      aliyunDeviceInspection(this.pageNo, this.pageSize, this.deviceId, this.startTime, this.inspectionStatus,).then(res => {
        this.data = res.result.records
        this.loading = false
        this.$message.success('查询成功');
      }).catch(err => {
        this.loading = false
      })
    },
    // 设备详情
    detailBtn(id) {
      this.$refs.HandlingWarranty.modal2Visible = true
      this.$refs.HandlingWarranty.init(id)
    },
    // 折线图
    analysis(xData, yData) {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('analysis') // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)
      let color = ['#FFB64E']

      let xAxisData = xData
      let yAxisData1 = yData
      const hexToRgba = (hex, opacity) => {
        let rgbaColor = ''
        let reg = /^#[\da-f]{6}$/i
        if (reg.test(hex)) {
          rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
            '0x' + hex.slice(5, 7)
          )},${opacity})`
        }
        return rgbaColor
      }
      myChart.setOption({
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        color: color,
        legend: {
          top: 20
        },
        tooltip: {
          trigger: 'axis',
          extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#ffffff',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#333'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#5391FF'
              }
            },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            type: 'value',
            // name: '比例',
            axisLabel: {
              textStyle: {
                color: '#666'
              }
            },
            nameTextStyle: {
              color: '#666',
              fontSize: 12,
              // lineHeight: 40
            },
            // 分割线
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        // "dataZoom": [{
        //   "show": true,
        //   "height": 20,
        //   "xAxisIndex": [
        //     0
        //   ],
        //   bottom:'4%',
        //   "start": 10,
        //   "end": 90,
        //   handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        //   handleSize: '110%',
        //   handleStyle:{
        //     color:"#d3dee5",
        //
        //   },
        //   textStyle:{color:"#fff"},
        //   borderColor:"#90979c"
        // }, {
        //   "type": "inside",
        //   "show": true,
        //   "height": 20,
        //   "start": 0,
        //   "end": 35
        // }],
        series: [
          {
            // name: "2018",
            name: '数量',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: color[0],
                shadowBlur: 3,
                shadowColor: hexToRgba(color[0], 0.5),
                shadowOffsetY: 8
              }
            },
            symbol: 'circle', //数据交叉点样式
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: hexToRgba(color[0], 0.3)
                    },
                    {
                      offset: 1,
                      color: hexToRgba(color[0], 0.1)
                    }
                  ],
                  false
                ),
                shadowColor: hexToRgba(color[0], 0.1),
                shadowBlur: 10
              }
            },
            data: yAxisData1
          }
        ]
      })
    }
  }
}
</script>